import React, { memo, useEffect, useRef } from "react";
import type { FC, ReactNode } from "react";
import "@/assets/style/playlist.less";
import { useAppSelector, appShallowEqual, useAppDispatch } from "@/store";
import { changeCurrentIndex } from "@/store/modules/music";
interface songDisplay {
  keyId: number;
  id: number;
  name: string;
  singerName: string;
  albumMid: string;
}
interface IProps {
  children?: ReactNode;
  ifShow: boolean;
  showList: songDisplay[];
  handleDelete: (id: number, event: React.MouseEvent<HTMLSpanElement>) => void;
}

const PlayList: FC<IProps> = ({ ifShow, showList, handleDelete }) => {
  const conRef = useRef<HTMLDivElement>(null);

  const { currentIndex, playList } = useAppSelector(
    (state) => ({
      currentIndex: state.music.currentIndex,
      playList: state.music.playList,
    }),
    appShallowEqual
  );
  const dispatch = useAppDispatch();

  const handleChangeSong = (id: number) => {
    dispatch(changeCurrentIndex(id));
  };

  useEffect(() => {
    const con = conRef.current;
    if (!con) return;
    if (ifShow) {
      con.style.left = "0";
    } else {
      con.style.left = "-30%";
    }
  }, [ifShow]);

  return (
    <div className="list-container" ref={conRef}>
      <div className="top-title">播放列表</div>
      <div className="bottom-list">
        {showList.map((e) => (
          <div
            className={`list-item ${currentIndex == e.id ? "active-list" : ""}`}
            key={e.keyId}
            onClick={() => handleChangeSong(e.id)}
          >
            <div className="list-text">
              <span
                className={`song ${currentIndex == e.id ? "active-text" : ""}`}
              >
                {e.name}
              </span>
              <span
                className={`singer ${
                  currentIndex == e.id ? "active-text" : ""
                }`}
              >
                {" "}
                - {e.singerName}
              </span>
              <span
                className="delete bi-x"
                onClick={(event) => handleDelete(e.id, event)}
              ></span>
            </div>
          </div>
        ))}
      </div>
      {/* <div className="bottom-list">
        <div className="list-item">
          <span className="song">东风破</span>
          <span className="singer"> - 周杰伦</span>
          <span className="delete bi-x"></span>
        </div>
        <div className="list-item">
          <span className="song">东风破</span>
          <span className="singer"> - 周杰伦</span>
          <span className="delete bi-x"></span>
        </div>
        <div className="list-item">
          <span className="song">东风破</span>
          <span className="singer"> - 周杰伦</span>
          <span className="delete bi-x"></span>
        </div>
        <div className="list-item">
          <span className="song">东风破</span>
          <span className="singer"> - 周杰伦</span>
          <span className="delete bi-x"></span>
        </div>
      </div> */}
    </div>
  );
};

export default memo(PlayList);
